---
title: Guidelines
redirect_from:
  - /components/stopoverarrow/
---

<ReactExample exampleId="StopoverArrow-default" />

## When to use

- To show travelers how many times they have a stop in a given [segment](/kiwi-use/content/glossary/#segment).

## When not to use

- For general visual context---use an [illustration](/components/visuals/illustration/).
- For other visual cues including other arrows---use an [icon](/components/visuals/icon/).

## Component status

<ComponentStatus component="StopoverArrow" />

## Content structure

![Stops: represent each stop on a segment from 0 to 3.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:194%3A95)

## Content

### Include nonvisual information

Stopover arrows can create important context for users,
but [not everyone sees them](/foundation/accessibility/).
So make sure everything necessary is presented in a non-visual form.

Include text that's accessible to everyone
or text that's [displayed only to screen readers](https://webaim.org/techniques/css/invisiblecontent/).
Or your other favorite technique.
Just make sure everyone gets the information somehow.
